import styled from "styled-components";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import iconHash from "Iconlibs/hash";
import IconButton from "@mui/material/IconButton";
import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import { Link, useNavigate } from "react-router-dom";
import { useState } from "react";
import TabPanel from "components/TabPanel";
import { connect } from "react-redux";
import { addTag } from "../../redux/action";
import SnackBar from "components/SnackBar";
import { ThemeProvider } from "@mui/material/styles";
import { tabstheme } from "themes";
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
const EditPage = (props: any) => {
  const [value, setValue] = useState(0);
  const tagslist = props.tagslist;
  const navigate = useNavigate();
  const addTag = props.addTag;
  const [open,setOpen]=useState(false)
  const onCreateTag = () => {
    const tagInput = prompt("请输入标签名");
    if (tagInput !== null && tagInput.trim() !== "") {
      setOpen(true)
      addTag({ tagName: tagInput, TagIcon: "LoyaltyIcon" }, value.toString());
     
    }
  };
  const handleChange = (event: any, newValue: any) => {
    setValue(newValue);
  };
  const handleSnackBar = () => {
    setOpen(false)
  }
  const TagListWrapper = styled.div`
    margin-top: 10px;
    > ol {
      display: flex;
      flex-direction: column;
      > li {
        border-bottom: 1px solid #d9d9e2;
        > a {
          color: #333;
          padding: 15px 20px;
          display: flex;
          flex-direction: row;
          align-items: center;
          .spacer{
            flex-grow: 1;
          }
          .tag-name {
            margin-left: 20px;
          }
         
        }
      }
    }
  `;
  const TabBar = styled.div`
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    .edit-link {
      padding-right: 20px;
    }
  `;
  return (
    <div>
      <SnackBar message="创建成功" open={open} onChange={ handleSnackBar}/>
      <TabBar>
        <IconButton
          aria-label="add an alarm"
          onClick={() => {
            navigate(-1);
          }}
        >
          <ArrowBackIosIcon />
        </IconButton>
        <ThemeProvider theme={tabstheme}>
        <Tabs value={value} centered onChange={handleChange}>
          <Tab label="支出" key="label-input" />
          <Tab label="收入" key="label-output" />
        </Tabs>
        </ThemeProvider>
        <Link to="/note/edit" className="edit-link" onClick={onCreateTag}>
          新增
        </Link>
      </TabBar>

      {tagslist.map((_tag: any) => {
        const index = parseInt(_tag.category);
        return (
          <TabPanel value={value} index={index}>
            <TagListWrapper>
              <ol>
                {tagslist[index].tags.map((v: TagType) => {
                  return (
                    <TagItem
                      value={{
                        IconTag: iconHash[v.TagIcon],
                        tagName: v.tagName,
                        cate: value,
                      }}
                    />
                  );
                })}
              </ol>
            </TagListWrapper>
          </TabPanel>
        );
      })}
    </div>
  );
};

const TagItem = (props: any) => {
  const { IconTag, tagName, cate } = props.value;
  return (
    <li>
      <Link to={`/note/edit/${tagName}?category=${cate}`}>
        <IconTag /> <span className="tag-name">{tagName}</span>
        <div className="spacer"></div>
        <ArrowForwardIosIcon/>
      </Link>
    </li>
  );
};
const mapStateToProps = (state: any) => {
  return { tagslist: state.tags };
};
export default connect(mapStateToProps, { addTag })(EditPage);
